$joystickSize: 100px !default;

.joystick-stand {
  position: absolute;
  bottom: 50px;
  left: 50px;
  z-index: 4;
  display: block;
  border-radius: 100%;
  width: $joystickSize;
  font-size: $uiRootFontSize;
  background-color: $uiColor;
  transition: background-color .16s ease-in;
  user-select: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.joystick-stick {
  position: absolute;
  top: 25%;
  left: 25%;
  display: block;
  border-radius: 100%;
  width: 50%;
  background-color: $uiColor;
  transition: background-color .16s ease-in;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.joystick-stand:before,
.joystick-stick:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.joystick-stand.active,
.joystick-stand.active .joystick-stick {
  background-color: $uiActiveColor;
}
